<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置</title>
</head>
<style>
    div.container{
        width: 1004px;height:200px;
        border:1px solid red;
    }
    div.left{
        width: 200px;height:200px;
        border:1px solid lightblue;
        float:left;
    }
    div.right{
        width: 800px;height:200px;
        border:1px solid lightcoral;
        float:left;
    }
    div.rightitem{
        height:100px;
        border: 1px solid blue;
    }
    .rightitem > div{
        height:100px;
        width:100px;
        float:left;
        border:1px solid yellow;
        margin-left:15px;
    }
</style>
<body>

    <h1>定位</h1>
    html元素生成到页面当中所占用的 document的位置 
    平面 
        向左X  
        向下为Y
        原点为页面左上角
    <strong>position : 定位</strong>
    <pre>
        static    : 静态定位
        relative  : 相对定位，表示把原始的静态定位的左上角作为我们的原点.如果想要让位置发生偏移，我们要用left top
           本身没有变化 要与  位置 left top right bottom
        fixed     : 固定定位 : left top right bottom 原点为body的原点
        absolute  ：绝对定位 , body点
        sticky    : 粘贴定位
    </pre>


    <h2>粘贴定位</h2>
    <div style="position: sticky;top:0px;text-align: center;z-index:30">
        <input style="background-color: grey; width:200px;height:30px;" />
    </div>


    <h2>绝对定位</h2>
    <div style="position:absolute;left:0px;top:0px;width:200px;height:200px;background:blue">
        1
        <div style="position: relative;left:20px;top:30px;">2
            <div style="background:yellow;position:fixed;bottom:0px;right:0px;">
                t
            </div>
        </div>
    </div>

   
    <h2>固定定位</h2>
    也要与left top right bottom 位置 联动,通过给定初始值以后，位置永远不变,原点就是body的原点
    <div id="fixeddiv" style="position:fixed;bottom:0px;right:0px;width: 100px;height:100px;background:red;padding:10px;">
        <div style="text-align: right;"><span onclick="document.getElementById('fixeddiv').style.display = 'none'">X</span></div>
        <div>dfsfs</div>
    </div>


    <h2>静态位置 </h2>

    内联元素 从原点开始，左向右显示布局，行满以后自动新起一行.
    1在左  2在右  
    改变顺序也就是说把你的元素自行调整位置 
    <input type="text" value="2">
    <input type="text" value="1">

    块元素 : width:100% 换行
    <div style="position:static">3</div>
    <div style="position:static">2</div>
    <div style="position:static">1</div>
   
    <h2>relative : 相对定位 </h2>
    <div style="width:900px;height:300px;border: 1px solid red;">
        <div style="position:relative;
        border:1px solid yellow;width:400px;height:300px;
        ">3</div>
        <div style="position:relative;
        right:-404px;top:-302px;border:1px solid blue;width:400px;height:300px;
        ">4</div>
    </div>



    <h1>采用浮动方式完成</h1>
    <div class = "container">
        <div class="left">

        </div>
        <div class="right">
          
            <div class="rightitem">
                <div>1</div>    
                <div>2</div>
                <div>3</div>
            </div>
            <div class="rightitem">
                <div>4</div>    
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>

</body>
</html>